export default {
  init: function () {
    return {
      // 修饰input框的指令
      input: {
        // 当被绑定的元素插入到DOM上的时候
        inserted: function (el) {
          el.style.width = '300px';
          el.style.height = '35px';
          el.style.lineHeight = '35px';
          el.style.background = '#ddd';
          el.style.fontSize = '16px';
          el.style.border = '1px solid #eee';
          el.style.textIndent = '5px';
          el.style.textIndent = '8px';
          el.style.borderRadius = '5px';
        }
      },
      // input框默认选中的指令
      focus: {
        inserted: function (el) {
          el.focus();
        }
      },
      // 不能为空的指令
      required: {
        inserted: function (el) {
          el.addEventListener('blur', function (event) {
            if (el.value == '' || el.value == null) {
              el.style.border = '1px solid red';
              console.log('我不能为空');
            } else {
              el.style.border = '0px solid red';
            }
          });
        }
      },
      // 验证指令
      checked: {
        inserted: function (el) {
          el.addEventListener('blur', function (event) {
            console.log(el);
            console.log(event);
          });
        }
      },
      // 验证
      validate: {
        inserted: function (el, validateStr) {
          // 将验证规则拆分为验证数组
          let validateRuleArr = validateStr.value.split('|');
          // 监听失去焦点的时候
          el.addEventListener('blur', function (event) {
            //失去焦点进行验证
            checkedfun();
          });

          // 循环进行验证
          function checkedfun() {
            for (var i = 0; i < validateRuleArr.length; ++i) {
              let requiredRegex = /^required$/; // 判断设置了required
              let emailRegex = /^email$/; // 判断设置了email
              let phoneRegex = /^phone$/; // 判断设置了 phone
              let minRegex = /min\(/; //判断设置了min 最小值
              let maxRegex = /max\(/; //判断设置了max 最大值
              let minlengthRegex = /minlength\(/; //判断设置了 minlength 最大长度
              let maxlengthRegex = /maxlength\(/; //判断设置了 maxlength 最大长度
              let regexRegex = /regex\(/;
              // 判断设置了required
              if (requiredRegex.test(validateRuleArr[i])) {
                if (!required()) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断设置了email
              if (emailRegex.test(validateRuleArr[i])) {
                if (!email()) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断设置了 phone
              if (phoneRegex.test(validateRuleArr[i])) {
                if (!phone()) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断是否设置了最小值
              if (minRegex.test(validateRuleArr[i])) {
                if (!eval(validateRuleArr[i])) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断是否设置了最大值
              if (maxRegex.test(validateRuleArr[i])) {
                if (!eval(validateRuleArr[i])) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断设置了最小长度
              if (minlengthRegex.test(validateRuleArr[i])) {
                if (!eval(validateRuleArr[i])) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断设置了最大长度
              if (maxlengthRegex.test(validateRuleArr[i])) {
                if (!eval(validateRuleArr[i])) {
                  break;
                } else {
                  removeTips();
                }
              }
              // 判断测试正则表达式
              if (regexRegex.test(validateRuleArr[i])) {
                if (!eval(validateRuleArr[i])) {
                  break;
                } else {
                  removeTips();
                }
              }
            }
          }

          // 验证是否是必填项
          function required() {
            if (el.value == '' || el.value == null) {
              // console.log('不能为空');
              tipMsg('不能为空');
              return false;
            }
            return true;
          }

          // 验证是否是邮箱
          function email() {
            let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            if (!emailRule.test(el.value)) {
              tipMsg('请输入正确的邮箱地址');
              return false;
            }
            return true;
          }

          // 验证是否是手机号码
          function phone() {
            let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!phoneRule.test(el.value)) {
              tipMsg('请输入正确的手机号码');
              return false;
            }
            return true;
          }

          // 最小值验证
          function min(num) {
            if (el.value < num) {
              tipMsg('最小值不能小于' + num);
              //console.log('最小值不能小于'+num);
              return false;
            }
            return true;
          }

          // 最大值验证
          function max(num) {
            if (el.value > num) {
              tipMsg('最大值不能大于' + num);
              //console.log('最大值不能大于'+num);
              return false;
            }
            return true;
          }

          // 最小长度验证
          function minlength(length) {
            if (el.value.length < length) {
              //console.log('最小长度不能小于'+length);
              tipMsg('最小长度不能小于' + length);
              return false;
            }
            return true;
          }

          // 最大长度进行验证
          function maxlength(length) {
            if (el.value.length > length) {
              //console.log('最大长度不能大于'+length);
              tipMsg('最大长度不能大于' + length);
              return false;
            }
            return true;
          }

          // 进行正则表达式的验证
          function regex(rules) {
            if (!rules.test(el.value)) {
              tipMsg('请输入正确的格式');
              return false;
            }
            return true;
          }

          // 添加提示信息
          function tipMsg(msg) {
            removeTips();
            let tipsDiv = document.createElement('div');
            let curDate = Date.parse(new Date());
            tipsDiv.innerText = msg;
            tipsDiv.className = 'tipsDiv';
            tipsDiv.id = curDate;
            tipsDiv.style.background = '#f2f2f2';
            tipsDiv.style.color = 'red';
            //tipsDiv.style.position = 'absolute';
            tipsDiv.style.top = el.offsetTop + 45 + 'px';
            tipsDiv.style.left = el.offsetLeft + 'px';
            //document.body.appendChild(tipsDiv);
            insertAfter(tipsDiv, el.nextElementSibling);
            setTimeout(function () {
              let tipNode = document.getElementById(curDate);
              if (tipNode) {
                tipNode.remove();
              }
            }, 3000);
          }


          function insertAfter(newElement, targetElement){
            var parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
              // 如果最后的节点是目标元素，则直接添加。因为默认是最后
              parent.appendChild(newElement);
            } else {
              //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
              parent.insertBefore(newElement, targetElement.nextElementSibling);
            }
          }

          // 移除提示信息
          function removeTips() {
            if (document.getElementsByClassName('tipsDiv')[0]) {
              document.getElementsByClassName('tipsDiv')[0].remove();
            }
          }
        }
      }
    }
  }
}
